<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<jsp:include page="/WEB-INF/views/common/header.jsp"/>
		<script type="text/javascript" src= "<c:out value="${pageContext.request.contextPath}"/>/resources/js/customer_popup.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#repair_order_form')
					.on('load', function(){
						console.log("load");
					})
					.on('init.field.fv', function(e, data) {
						console.log("init.field.fv");
						/*
						var $icon		= data.element.data('fv.icon'),
							options		= data.fv.getOptions(),
							validators 	= data.fv.getOptions(data.field).validators;
						
						if ( validators.notEmpty && options.icon && options.icon.required ) {
							$icon.addClass(options.icon.required).show();
						}
						*/
					})
					.on('status.field.fv', function(e, data) {
						alert('status.field.fv');
					});
					/*
					.formValidation({
						framework: 'bootstrap',
						icon: {
							required: 'fa fa-asterisk',
							valid: 'fa fa-check',
							invalid: 'fa fa-times',
							valdating: 'fa fa-refresh'
						},
						fields: {
							serial_no: {
								validators: {
									message: 'Serial No. is required'
								}
							}
						}
					})
					.on('status.field.fv', function(e, data) {
						var $icon		= data.element.data('fv.icon'),
							options		= data.fv.getOptions(),
							validators	= data.fv.getOptions(data.field).validators;
						
						if ( validators.notEmpty && options.icon && options.icon.required ) {
							$icon.removeClass(options.icon.required).addClass('fa');
						}
					});
				*/
			});
		
			function retrieve() {
				var accountNumber 	= $('#customer_code').val();
				var serialNo 		= $('#serial_no').val();
				var repairOrderNo	= $('#repair_order_no').val();
				
				if ( serialNo == null || serialNo.trim().length == 0 ) {
					alert("Serial No. 값은 필수입니다.");
					return;
				}
				
				$.ajax({
					url:contextPath + "/repair_order_retrieve",
					data:{accountNumber:accountNumber, serialNo:serialNo, orderNo:repairOrderNo},
					type:'GET',
					dataType:'json'
				}).done(function(data) {
					$('#repair_order_table').bootstrapTable('load', data);
				});
			};
		</script>
	</head>
	<body>
		<jsp:include page="/WEB-INF/views/main/menu.jsp"/>
	
		<div class="container">
			<div class="page-header">
				<h3>수리 요청 조회</h3>
			</div>

			<form id="repair_order_form" class="form-inline">
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group form-group-sm">
							<label class="control-label" for="customer_code" style="width: 100px">고객</label> 
							<input type="text" class="form-control" id="customer_code" placeholder="고객 코드" disabled>
							<div class="input-group">
								<label class="sr-only" for="customer_name">고객명</label> 
								<input type="text" class="form-control" id="customer_name" placeholder="고객 명" disabled> 
								<span class="input-group-btn">
									<input type="button" class="btn btn-primary btn-sm" id="customer_btn" value="선택"/>
								</span>
							</div>
						</div>
					</div>
				</div>
				<p />
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group form-group-sm">
							<label class="control-label" for="manager_code" style="width: 100px">관리국</label> 
							<input type="text" class="form-control" id="manager_code" placeholder="관리국 코드" disabled>
							<div class="input-group">
								<label class="sr-only" for="manager_name">관리국명</label> 
								<input type="text" class="form-control" id="manager_name" placeholder="관리국 명" disabled> 
								<span class="input-group-btn">
									<input type="button" class="btn btn-primary btn-sm" id="manager_btn" value="선택"/>
								</span>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group form-group-sm">
							<label class="control-label" for="operator_code" style="width: 100px">운용국</label> 
							<input type="text" class="form-control" id="operator_code" placeholder="운용국 코드" disabled>
							<div class="input-group">
								<label class="sr-only" for="operator_name">운용국 명</label> 
								<input type="text" class="form-control" id="operator_name" placeholder="운용국 명" disabled> 
								<span class="input-group-btn">
									<input type="button" class="btn btn-primary btn-sm" id="operator_btn" value="선택"/>
								</span>
							</div>
						</div>
					</div>
				</div>
				<p />
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group form-group-sm required">
							<label class="control-label" for="serial_no" style="width: 100px">Serial No.</label> 
							<input type="text" class="form-control" id="serial_no" size="56" required="required">
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group form-group-sm">
							<label class="control-label" for="repair_order_no" style="width: 100px">Order No.</label> 
							<input type="text" class="form-control" id="repair_order_no" size="56">
						</div>
					</div>
				</div>
				<p />
				<div class="row">
					<div class="col-sm-push-6 col-sm-2">
						<a href="repair_order_create"><input type="button" class="btn btn-primary btn-sm btn-block" id="add" value="작성"></a>
					</div>
					<div class="col-sm-push-6 col-sm-2">
						<input type="button" class="btn btn-primary btn-sm btn-block" id="del_btn" value="삭제">
					</div>
					<div class="col-sm-push-6 col-sm-2">
						<input type="button" class="btn btn-primary btn-sm btn-block" id="retrieve_btn" value="조회" onclick="retrieve()">
					</div>
				</div>
			</form>
			<p />
			<!--
			<div class="fixed-table-container">
			<div style="overflow-x:auto">
			<div class="table-responsive">
			-->
			<!-- 
			<table data-toggle="table" data-url="<c:out value="${pageContext.request.contextPath}"/>/resources/test_data/data.json" data-height="400" data-side-pagination="server" data-pagination="true" data-page-list="[5, 10, 20, 50, 100]" data-search="false">
			 -->
			<table id="repair_order_table" data-toggle="table" data-height="400" data-pagination="true" data-search="false" style="width:1300px;">
				<thead>
					<tr>
						<th data-field="state" data-checkbox="true"></th>
						<th data-field="roHeaderId" data-align="center">Repair Order No</th>
						<th data-field="serialNo" data-align="center">Serial No</th>
						<th data-field="itemGroup" data-align="center">기종 Code</th>
						<th data-field="inventoryItemId" data-align="center">품목</th>
						<th data-field="roRequestDate" data-align="center">수리의뢰일</th>
						<th data-field="custName" data-align="center">고객</th>
						<th data-field="sheepCustomer" data-align="center">운용국</th>
						<th data-field="custShippingFlag" data-align="center">고객조치상태</th>
						<th data-field="whDate" data-align="center">고객조치일</th>
						<th data-field="lastCustConfirmDate" data-align="center">고객인계확인일</th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div class="modal fade" role="dialog" id="modal_div">
			<div class="modal-dialog">
				<div class="modal-content">
				</div>
			</div>
		</div>
	</body>
</html>